import React, { Component } from 'react'
import {nanoid} from 'nanoid'
export default class Showstu extends Component {
    handleOpera = (e) => {
        let {innerText} = e.target;
        if(innerText === '删除'){
            this.props.deleteStu(e.target.parentNode.parentNode.firstChild.innerText);
        }else{
            let operaNode = e.target.parentNode.parentNode.firstChild;
            this.props.updateInfo(operaNode.innerText,operaNode.nextSibling.innerText,operaNode.nextSibling.nextSibling.innerText)
        }
    }
    render() {
        let { stuArr ,tableStyle,toolStyle} = this.props;
        let tableRender = stuArr.map(item => {
            return (
                <tr key={nanoid()}>
                    <td>{item.name}</td>
                    <td>{item.sex}</td>
                    <td>{item.age}</td>
                    <td>
                        <span style={toolStyle} onClick={this.handleOpera}>修改</span>&nbsp;
                        <span style={toolStyle} onClick={this.handleOpera}>删除</span>
                    </td>
                </tr>
            )
        })
        return (
            <table style={tableStyle}>
                <thead>
                    <tr><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr>
                </thead>
                <tbody>
                    {tableRender}
                </tbody>
            </table>
        )
    }

}
